<template>
  <!-- 7月23号-----------------7月23号-----------------7月23号----------------- -->
  <!-- 注册组件(全局组件),注册完成后,去main.js导入注册使用 -->
  <!-- 在src\views\employees\index.vue,就是员工页面,找到顶部结构,复制出来到src\components\pageTools\index.vue使用, -->
  <!-- 然后里面的结构不是固定的了,而是外面传递进来的,所以之前的样式就删除, -->
  <!-- 接收,外面传递进来,使用<slot></slot> -->
  <!-- 因为views\approvals\index.vue,这个页面,用的插槽名字叫 before,after,所以这里的就需要,<slot name="before"></slot>,<slot name="after"></slot> -->
  <!-- 定义好后,就可以传递结构到当前页面了 -->
  <el-card class="head-card">
    <el-row type="flex" justify="space-between">
      <!-- 顶部栏,左侧 -->
      <el-col :span="8">
        <slot name="before"></slot>
      </el-col>
      <!-- 顶部栏,右侧 -->
      <el-col class="right-col" :span="8">
        <slot name="after"></slot>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
export default {
  name: 'pageTools'
}
</script>

<style>
.right-col {
  text-align: right;
}
</style>
